<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面经合集</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1992971_c1dhs6uqoej.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html{
            font-size: 14px;
        }
        ul,li{
            list-style: none;
        }
        h1,h2,h3,h4,h5,h6{
            font-size: 14px;
            font-weight: normal;
        }
        i,em{
            font-style: normal;
        }
        b,strong{
            font-weight: normal;
        }
        a{
            text-decoration: none;
            color: #000;
        }

        /* 面经合集 */
        #experience{
            width: 100%;
            background-color: #eee;
            overflow: hidden;
        }
        .exp-con{
            width: 1158px;
            margin: 50px auto;
            background-color: #fff;
            padding: 20px;
        }
        .exp-con h2{
           margin-bottom: 20px;
        }
        .exp-con h2 .iconfont{
            color: #ff6547;
            font-size: 18px;
        }
        .exp-con h2 i{
            font-size: 16px;
            color: #333;
            margin-left: 8px;
            font-weight: bold;
        }
        .exp_wrap{
            overflow: hidden;
            width: 100%;
        }
        .exp_wrap a{
            display: inline-block;
            cursor: pointer;
        }
        .exp_wrap a:hover{
            box-shadow: 0 0 10px #ddd;
        }
        .exp-con dl{
            width:265px;
            height:80px ;
            padding: 20px 10px;
            float: left;
        }
        dl dd{
            width: 80px;
            height: 80px;
            float: left;
        }
        dd img{
            width: 100%;
            height: 100%;
        }
        dl dt{
            float: left;
            margin-left: 10px;
        }
        dt h3{
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        dt h3:hover{
            color: #25bb9b;
        }
        dt h4{
            height: 14px;
            width: 175px;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            margin-bottom: 12px;
        }
        dt h4 p{
            float: left;
        }
        dt h4 p:last-child{
            float: right;
        }
        dt h4 p i{
            color: #25bb9b;
        }
        dt h5{
            font-size: 12px;
            color: #767676;
        }
        .exp_wrap .template{
            display: none;
        }
    </style>
</head>
<body>  
    <!-- 面经合集 -->
    <div id="experience">
        <div class="exp-con">
            <h2>
                <span class="iconfont icon--"></span>
                <i>面经合集</i>
            </h2>
            <!-- 容器 -->
            <div class="exp_wrap">
                <!-- 模板 -->
                <a target="_blank"  class="template">
                    <dl>
                        <dd>
                            <img src="" alt="">
                        </dd>
                        <dt>
                            <h3></h3>
                            <h4>
                                <p><i class="comNum"></i> 家公司</p>
                                <p><i class="expNum"></i> 篇面经</p>
                            </h4>
                            <h5>最后跟新于<b class="update"></b>小时前</h5>
                        </dt>
                    </dl>
                </a>
            </div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                url:"http://127.0.0.1:84/getExp",
                success(data){
                    let list = JSON.parse(data)
                    let template = $(".template")
                    list.forEach(item => {
                        let newLi = template.clone(true)
                        newLi.removeClass()
                        $(".exp_wrap").append(newLi)

                        newLi.attr("href",`http://127.0.0.1:84/list.html?post=${window.location.href.split("?")[1].split("=")[1]}`)
                        newLi.find("img").attr("src",item.img)
                        newLi.find("h3").html(item.post)
                        newLi.find(".comNum").html(item.company)
                        newLi.find(".expNum").html(item.expNum)
                        newLi.find(".update").html(item.update)
                    });
                }
            })
        })
    </script>
</body>
</html>